<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>问答详情</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- LESS for CSS file -->
    <link href="css/css/index.css" rel="stylesheet" type="text/css">
    <link href="css/css/top_bar.css" rel="stylesheet" type="text/css">
    <link href="css/css/ask.css" rel="stylesheet" type="text/css">

  </head>
  <body>
    <div class="container-fluid">
      <div class="row" id="top_bar">
        <div class="fixed_div">  <!-- fixed_div -->
          <div class="webTitle">
            <a href="/index.html">
              <img src="image/art_logo.png">
            </a>
          </div>
          <div class="search">
            <img src="image/search.png">
            <input type="text" placeholder="搜索画室、标签">
          </div>
          <div class="switch-pages">
            <a href="/index.html"><span class="top_btn">首页</span></a>
            <a href="/Q&A.html"><span class="top_btn active">问答</span></a>
            <a href="/gallery.html"><span class="top_btn">资料</span></a>
          </div>
          <div class="operation-btns">
            <span class="log_reg" data-toggle="modal" data-target="#logModal">登录</span>
            <span class="log_reg" data-toggle="modal" data-target="#regModal">注册</span>
            <div class="user">
              <div class="avatar_userName">
                <a href="/Info.html">
                  <div class="log_avatar">
                    <img src="image/emptyAvatar.jpg"> 
                  </div>  
                  <span class="userName">name</span>
                </a> 
              </div>

              <div class="hidden_first">
                <div class="triangle"></div>  
                <div class="user-list">
                  <div class="updateInfo" data-toggle="modal" data-target="#updateInfoModal">
                    <a href="/updateUserInfo.html">修改资料</a>
                  </div>
                  <div class="changePass" data-toggle="modal" data-target="#changePassModal">修改密码</div>
                  <div class="quit">退出</div>
                </div>
              </div>
            </div>
          </div> 
        </div>
      </div>


      <!-- 中心信息框 -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div> 
        <div class="center-problem col-lg-7 col-md-7 col-sm-7 col-xs-7">
          <!-- 返还首页 -->
          <div class="return_home">
            <a href="/Q&A.html">问答</a>
            <span>&gt;</span>
            <span>详情</span>
          </div>
          <!-- 问题区...... -->
        </div>
        <!-- 右部提问者信息 -->
        <div class="user-info col-lg-4 col-md-4 col-sm-4 col-xs-4">
        </div>
      </div>


      <!-- logModal -->
      <div class="modal fade" id="logModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>
            <div class="input-line">
              <img src="image/email.png" class="account-img">
              <input type="text" id="logAccount" placeholder="输入账号"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <img src="image/lock.png" class="password-img">
              <input type="password" id="logPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="main-submit" src="image/login.png">
            </div>
            <div class="other_login">
              <img src="image/weibo.jpg">
              <span>其它登录：</span>
            </div>
          </div>
        </div>        
      </div>

      <!-- regModal -->
      <div class="modal fade" id="regModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>

            <div class="input-line">
              <div class="labels">
                <span>手机号码</span>
              </div>
              <input type="text" id="regPhone" class="short" placeholder="输入手机号码"/>
              <img class="getCode" src="image/getCode.png">
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>验证码</span>
              </div>
              <input type="text" id="regCode" placeholder="输入手机验证码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword2" placeholder="再次输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="submit-holder">
              <img class="main-submit" src="image/reg.png">
            </div>
          </div>
        </div>        
      </div>

      <!-- changePassModal -->
      <div class="modal fade" id="changePassModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">

            <div class="input-line">
              <input type="password" id="oldPassword" placeholder="输入旧密码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword1" placeholder="输入新密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword2" placeholder="确认新密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="quit" src="image/cancel.png" data-dismiss="modal">
              <img class="main-submit" src="image/confirm.png">
            </div>
          </div>
        </div>        
      </div>
          
    </div>
    
    <!-- 中心问题模板 -->
    <script id="problems-template" type="text/x-handlebars-template">  
      <div class="articles" data-problemId={{_id}} data-userId={{userId}}>
        <div class="left-col">
          <div>
            {{#if_empty avatarUrl}}
              <img src='image/emptyAvatar.jpg'>
            {{else}}
              <img src={{avatarUrl}}>
            {{/if_empty}}
          </div>

          <div class="left-triangle"></div>
        </div> 
        <div class="right-col">
          <div class="problem-details">
            <h5><a href="/otherInfo.html?userId={{userId}}">{{name}}</a></h5>
            <h6>{{publishTime}}</h6>
            <p>
              {{#if_empty askTo}}
              {{else}}
                {{#if_studio askToType}}
                  <a href="/studio.html?studioId={{askTo}}">@{{askToName}} </a>  
                {{else}}
                  <a href="/otherInfo.html?userId={{askTo}}">@{{askToName}} </a>  
                {{/if_studio}}
              {{/if_empty}}
              {{content}}
            </p>
            <div class="paintings">
              {{#if hasImage}}          <!-- 判断问题是否有图片 -->
                <img src={{image}}>
              {{/if}}
            </div>
            <div class="tags-showAll">
              <img src="image/tags.png">
              {{#each tag}}
                <span class="tags">{{this}}</span>
              {{/each}}
              
            </div>
          </div>
          <div class="problem-comment">
            <div class="left-zan three">
              {{#if_zan isZan}}
                <img src="image/clickZan_active.png" class="active">
              {{else}}
                <img src="image/clickZan.png">
              {{/if_zan}}
              <span class="num">{{zan}}</span>
            </div>
            <div class="medium-answer three">
              <img src="image/comment.png">
              <span class="num">回答{{answerList/length}}</span>
            </div>
            <div class="right-comment three">
              <img src="image/comment.png">
              <span class="num">评论{{commentList/length}}</span>
            </div>
          </div>
        </div>
        <!-- 评论框 -->
        <div class="show-comments" data-skip=0>
          <div class="bottom-triangle"></div>
          <div class="main-answers">
            <h2>暂无回答</h2>
            <!--  老师新回答问题 -->
            <div class="teacher-new-answer">
              <input type="text" placeholder="发布新回答">
              <button class="btn btn-primary btn-sm">发布</button>
            </div>
            <!-- 插入回答内容 -->
          </div>
          <div class="main-comments">
            <!-- 插入评论内容 --> 
          </div>
          <div class="information">
            <h2>暂无评论</h2>
            <div class='normal-comment'>
              <textarea placeholder="发表评论..."></textarea>
              <button class="btn btn-primary btn-md">评论</button>  
            </div>
            <div class="reply" data-replyTo=''>
              <textarea placeholder="回复评论..."></textarea>
              <button class="reply-submit btn btn-primary btn-md">回复</button>  
              <button class="reply-cancel btn btn-default btn-md">取消</button>  
            </div>
          </div>
        </div>
      </div>
    </script>

    <!-- 评论内容模板 -->
    <script id="comments-template" type="text/x-handlebars-template">
      {{#each this}}
        <div class="comment-content" data-fromUser={{fromUser}}>
          <div class="comment-left-col">
            <div>
              {{#if_empty fromUserAvatarUrl}}
                <img src="image/emptyAvatar.jpg">  
              {{else}}
                <img src={{fromUserAvatarUrl}}>
              {{/if_empty}}
            </div>
          </div>
          <div class="comment-right-col">
            <h5><a href="otherInfo.html?userId={{fromUser}}">{{fromUserName}}</a></h5>
            <h6>{{publishTime}}</h6>
            <p>
              {{#if_empty toUserId}}
              {{else}}
                <a href="/otherInfo.html?userId={{toUserId}}">@{{toUserName}} </a>  
              {{/if_empty}}
              {{content}}
              <span>回复</span>
            </p>
          </div>
        </div>
      {{/each}}
    </script>

     <!-- 老师/画室回答模板 -->
    <script id="answers-template" type="text/x-handlebars-template">
      {{#each this}}
        <div class="answer-container" data-answerId={{_id}} data-fromUser={{userId}}>
          <div class="answerer-info">
            <div class="answerer-left-col">
              <div>
                {{#if_empty avatarUrl}}
                  <img src="image/emptyAvatar.jpg">  
                {{else}}
                  <img src={{avatarUrl}}>
                {{/if_empty}}
              </div>
            </div>
            <div class="answerer-right-col">
              {{#if_studio uType}}
                <h5><a href="studio.html?studioId={{userId}}">{{userName}}</a></h5>
              {{else}}
                <h5><a href="otherInfo.html?userId={{userId}}">{{userName}}</a></h5>
              {{/if_studio}}
              <h6>{{updateTime_changed}}</h6>
            </div>
          </div>
          <div class="talking-area">
            {{#each content}}
              {{#if_answer_content aType}}
                <div class="talking-content">
                  <div class="left">
                    <p>{{content}}</p>
                  </div> 
                </div>
              {{else}}
                <div class="talking-content">
                  <div class="right">
                    <p>
                      <span>追问：</span>
                      {{content}} 
                    </p>
                  </div> 
                </div>
              {{/if_answer_content}}
            {{/each}}
          </div>
          <div class="reply">
             <input type="text" placeholder="追问问题">
             <button class="btn btn-primary btn-sm">追问</button>
          </div>         
        </div>
      {{/each}}
    </script>

    <!-- 右方个人信息模板 -->
    <script id="info-template" type="text/x-handlebars-template">
      <div class="box-info">
        <div class="image-info">
          {{#if_empty avatarUrl}}
            <img src="image/emptyAvatar.jpg">
          {{else}}
            <img src={{avatarUrl}}>
          {{/if_empty}}
        </div>
        <h3>{{name}}</h3>
        <div class="concern_fan_info">
          <div class="left-concern">
            <h4><b>{{followNum}}</b></h4> 
            <h5><a href="/myFollow.html">关注</a></h5>
          </div>
          <div class="right-fan">
            <h4><b>{{fanNum}}</b></h4>
            <h5><a href="/fans.html">粉丝</a></h5> 
          </div>
        </div>
      </div>
      <div class="info-button">
        <img src="image/queryScore.png">
      </div>
    </script>


    <!-- main javascript entrance -->
    <script src="js/tools/require.js" data-main="js/Q&A_details"></script>

      <div class="footer">
        <div class="footerContent">
          <ul class="footerList">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">广告业务</a></li>
          </ul>
          <p class="icp">京备123号</p>
          <h2>美术帮</h2>
        </div>
      </div>
  </body>
</html>